<!--
	各类直接经济损失值（元）
	Created by Penglei on 2023/08/08
-->
<template>
	<div id="pecuniaryLossesChartsRef" ref="pecuniaryLossesChartsRef" class="echats-box"></div>
</template>

<script setup name="PecuniaryLosses">
import { onMounted } from 'vue';
// 引入echats
import * as echarts from 'echarts';

let myChart = null;
// 渲染图表
const renderChart = () => {
	if (!myChart) {
		myChart = echarts.init(document.getElementById('pecuniaryLossesChartsRef'));
	}
	// 数据
	let dataAxis = ['生命线系统', '室内外财产', '房屋装修', '房屋'];
	let data = [85578, 37215, 98789, 102987];
	// 配置项
	const option = {
		title: {
			show: false
		},
		xAxis: {
			type: 'value',
			position: 'top',
			// 不显示线条和刻度
			splitLine: {
				show: false,
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false,
			},
		},
		yAxis: {
			type: 'category',
			data: dataAxis,
			// 不显示线条和刻度
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: true,
				fontSize: 14,
				margin: 0,
				color: '#ffffff',
				align: 'left',
				verticalAlign: 'bottom',
				lineHeight: '40',
			},
			splitLine: {
				show: false,
			}
		},
		grid: {
			show: false,
			left: '20',
			right: '20',
			top: 15,
			bottom: -10,
		},
		tooltip: {
			show: true,
			formatter: '{b0}: {c0}'
		},
		series: [
			{
				type: 'bar',
				barWidth: '10',
				showBackground: true,
				backgroundStyle: {
					color: '#000000',
					borderRadius: 5, // 统一设置四个角的圆角大小
					// borderRadius: [5, 5, 5, 5], //（顺时针左上，右上，右下，左下）
				},
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#0775FE' },
						{ offset: 1, color: '#46FFFF' }
					]),
					barBorderRadius: [5, 5, 5, 5], //（顺时针左上，右上，右下，左下）
				},
				label: {
					color: '#ffffff',
					show: true,
					align: 'right',
					verticalAlign: 'bottom',
					lineHeight: 40,
					position: 'insideTopRight',
					// 相对的百分比
					// position: ['100%', 5]
				},
				data: data
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 挂载完成
onMounted(() => {
	// 渲染图表
	renderChart();
})
</script>

<style lang="scss" scoped>
.echats-box {
	height: 230px;
}
</style>